<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/treetable/jquery.treetable.css"/>
    <link rel="stylesheet" href="/css/treetable/jquery.treetable.theme.default.css"/>
    <script src="/layui/layui.js"></script>
    <script src="/js/libs/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/bootstrap/bootstrap-select.min.js"></script>
    <script src="/js/jq.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/dict.js"></script>
    <script src="/js/libs/jquery.ztree.all-3.5.min.js"></script>
    <script src="/js/my/ztree-menu.js"></script>
    <script src="/js/my/permission.js"></script>
    <script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
    <script src="/js/libs/jquery.treetable.js"></script>
</head>
<body>
<div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div>
            <header style="height: 100%">
                <div align="left">
                    <table style="width: 100%">
                        <tr>
                            <td>
                                <form class="form-inline" onsubmit="return false">
                                    <div class="form-group">
                                        <label>负责人:</label>
                                        <input class='form-control' type='hidden' name='executorId' id='executorId'>
                                        <input class='form-control' placeholder='负责人' type='text'
                                               name='executorName' id='executorName'
                                               data-bv-notempty='true' readonly>
                                        <a href="#" class="layui-btn layui-btn-sm"
                                           onclick="showTableAndFlushFields( 'user', 'user', '用户', true, false, 'executorId:id', 'executorName:nickname')">
                                            <i class="layui-icon">&#xe615;</i>
                                        </a>
                                        <label>项目等级：</label>
                                        <select class="form-control input-sm col-md-1 selectpicker show-tick"
                                                name="grade"
                                                id="grade"
                                                title="项目等级" data-live-search="true">
                                        </select>
                                        <label>项目状态：</label>
                                        <select class="form-control input-sm col-md-1 selectpicker show-tick"
                                                name="status"
                                                id="status"
                                                title="项目状态" data-live-search="true">
                                        </select>

                                        <button id="searchBt" class="layui-btn layui-btn-sm search"><i class="layui-icon">&#xe615;</i>搜索
                                        </button>
                                    </div>
                                </form>
                            </td>

                        </tr>
                        <tr>
                            <td align="right">
                                <button class="layui-btn layui-btn-sm" onclick="openIFrame('/pages/tms/project/addProject.html', '添加项目')">
                                    <i class="layui-icon">&#xe608;</i> 添加
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>
            </header>

            <div>
                <div class="widget-body no-padding">
                    <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>项目名称</th>
                            <th>负责人</th>
                            <th>成员</th>
                            <th>项目详情</th>
                            <th>项目等级</th>
                            <th>截止日期</th>
                            <th>项目状态</th>
                            <th>是否子项目</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script type="text/javascript">
    var pers = checkPermission();
    $(function () {
        showDictSelect('grade', 'dept_level', '--请选择--', '');
        showDictSelect('status', 'task_status', '--请选择--', '', '-1', '2', '9');
    });
    var example;

    function init() {
        example =
            $('#dt-table').DataTable({
                "searching": false,
                "processing": false,
                "serverSide": true,
                "language": {
                    "url": "/js/plugin/datatables/Chinese.lang"
                },
                "ajax": {
                    "url": "/project/list",
                    "type": "get",
                    "data": function (d) {
                        d.executorId = $('#executorId').val();
                        d.grade = $('#grade').val();
                        d.status = $('#status').val();
                        d.type = 'project';
                    }
                },
                "dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
                "columns": [
                    {"data": "id", "defaultContent": "", "visible": false},
                    {
                        "data": "name",
                        "defaultContent": "",
                        "render": function (data, type, row) {
                            var id = row['id'];
                            var isSubProject = row['isSubProject']
                            if(isSubProject == 0){
                                return '<a href="javascript:void(0)" onclick="parent._tabAdd(this)" data-url="pages/tms/task/taskList.html?id=' + id + '" lay-id="157_' + id + '">' + data + '</a>'
                            }else{
                                return '<a href="javascript:void(0)" onclick="parent._tabAdd(this)" data-url="pages/tms/project/projectDetailList.html?parentId=' + id + '" lay-id="158_' + id + '">' + data + '</a>'
                            }

                        }

                    },
                    {"data": "executorName", "defaultContent": ""},
                    {"data": "participantName", "defaultContent": "", "orderable": false,},
                    {"data": "description", "defaultContent": "", "orderable": false,},
                    {
                        "data": "grade",
                        "defaultContent": "",
                        "orderable": false,
                        render: function (data, type, row) {
                            return getDict('dept_level')[data];
                        }
                    },
                    {
                        "data": "deadline",
                        "width":"60px",
                        "defaultContent": "",
                        "render": function (data, type, row) {
                            var diffDays = DateDiff(data, new Date().Format());
                            if (diffDays > 1) {
                                return "<span class='layui-badge layui-bg-green'>" + data + "</span>";
                            } else if (diffDays === 1) {
                                return "<span class='layui-badge layui-bg-orange'>" + data + "</span>";
                            } else {
                                return "<span class='layui-badge layui-bg-red'>" + data + "</span>";
                            }
                        }
                    },
                    {
                        "data": "status",
                        "defaultContent": "",
                        "orderable": false,
                        render: function (data, type, row) {
                            return getDict('task_status')[data];
                        }
                    },
                    {"data": "isSubProject", "defaultContent": "","visible": false},
                    {
                        "data": "",
                        "defaultContent": "",
                        "orderable": false,
                        "render": function (data, type, row) {
                            var id = row['id'];
                            var href = "updateProject.html?id=" + id;
                            var addHref = "addProjectDetail.html?parentId=" + id;
                            var edit = buttonEdit(href, "", pers);
                            var addProjectDetail = buttonAdd(addHref, "", pers);
                            var del = buttonDel(id, "tms:project:del", pers);
                            return edit + addProjectDetail + del;
                        }
                    },
                ],
                "order": [[0, "desc"]]
            });
    }

    layui.use('layer', function () {
        var layer = layui.layer;
    });


    function del(id) {
        layer.confirm('确定要删除吗？', {
            btn: ['确定', '取消']
        }, function () {
            $.ajax({
                type: 'delete',
                url: '/project/' + id,
                success: function (data) {
                    example.ajax.reload();
                    layer.msg("删除成功");
                }
            });

            layer.close(1);
        });
    }

    $("#searchBt").click(function () {
        example.ajax.reload();
    });

    init();
</script>
